<template>
  <div id="app">
    <!-- <div v-if="getLogin" style="float:left;"> -->
      <left-nav v-show="getEnterLoginPage"></left-nav>
      <top-nav v-show="getEnterLoginPage"></top-nav>
      <div :class="{unfold:getCollapse,content:getEnterLoginPage}">
        <div class="overAuto">
            <router-view class="animated bounceInDown delay-1s"></router-view>
        </div>
      </div>
    <!-- </div>
    <div v-else style="float:left;">
        <router-view></router-view>
    </div> -->
  </div>
</template>

<script>
// 导入Vuex中的mapGetters 辅助函数 ，帮助快速的将store中的getters映射到局部组件的计算属性中
import { mapGetters , mapMutations , mapActions } from 'vuex'
import { Loading } from 'element-ui'
import LeftNav from './components/leftnav'
import TopNav from './components/topnav'
export default {
  data () {
    return {
      path: ''
    }
  },
  name: 'App',
  components: {
    LeftNav,
    TopNav
  },
  methods: {
  },
  computed: {
    // 获取到展开类的值
    unfolds () {
      return this.$store.state.isCollapse
    },
    // getLogin登录状态获取,getCollapse获取到展开类的值
    ...mapGetters('user',[
      'getLogin',
      'getCollapse',
      'getEnterLoginPage'
    ])
  },
  created () {
  }
}
</script>

<style scoped lang="less">
body{
  margin:0;
}
#app{
  width:100vw;
  overflow:hidden;
}
.content{
  float:left;
  height:calc( 100vh - 65px );
  overflow:hidden;
  width:calc( 100vw - 201px);
  background:#f1f1f1;
  &.unfold{
    width:calc( 100vw - 65px);
  }
}
.overAuto{
    height:calc( 100vh - 10px );
    overflow:auto;
    width:calc(100% + 20px) !important;
    &>div{
      padding-bottom:50px;
      min-height:80vh;
    }
}
</style>
